<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摄像头FPS测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .camera-container {
            text-align: center;
            margin: 20px 0;
        }
        #cameraFeed {
            max-width: 100%;
            border: 2px solid #ddd;
            border-radius: 4px;
        }
        .fps-display {
            font-size: 18px;
            font-weight: bold;
            margin: 10px 0;
            padding: 10px;
            background: #f0f0f0;
            border-radius: 4px;
        }
        .status {
            margin: 10px 0;
            padding: 10px;
            border-radius: 4px;
        }
        .status.success { background: #d4edda; color: #155724; }
        .status.warning { background: #fff3cd; color: #856404; }
        .status.error { background: #f8d7da; color: #721c24; }
    </style>
</head>
<body>
    <div class="container">
        <h1>📹 摄像头FPS测试</h1>
        <p>此页面用于测试摄像头FPS设置是否生效。目标FPS: 40</p>
        
        <div class="camera-container">
            <img id="cameraFeed" src="http://127.0.0.1:5001/video_feed" draggable="false" />
            <div id="fpsDisplay" class="fps-display">FPS: 0</div>
            <div id="status" class="status">等待摄像头连接...</div>
        </div>
        
        <div>
            <h3>测试说明：</h3>
            <ul>
                <li>页面会自动连接摄像头并显示实时画面</li>
                <li>FPS计数器会显示实际的帧率</li>
                <li>如果FPS接近40，说明设置成功</li>
                <li>如果FPS仍然很低，可能需要检查后端设置</li>
            </ul>
        </div>
    </div>

    <script>
        let frameCount = 0;
        let lastFpsTime = performance.now();
        let currentFps = 0;
        
        const cameraFeed = document.getElementById('cameraFeed');
        const fpsDisplay = document.getElementById('fpsDisplay');
        const status = document.getElementById('status');
        
        // 更新FPS统计
        function updateFps() {
            frameCount++;
            const now = performance.now();
            if (now - lastFpsTime >= 1000) {
                currentFps = frameCount;
                frameCount = 0;
                lastFpsTime = now;
                
                fpsDisplay.textContent = `FPS: ${currentFps}`;
                
                // 更新状态
                if (currentFps >= 35) {
                    status.textContent = `✅ 摄像头FPS正常 (${currentFps})`;
                    status.className = 'status success';
                } else if (currentFps >= 25) {
                    status.textContent = `⚠️ 摄像头FPS偏低 (${currentFps})`;
                    status.className = 'status warning';
                } else {
                    status.textContent = `❌ 摄像头FPS过低 (${currentFps})`;
                    status.className = 'status error';
                }
                
                console.log(`📹 摄像头FPS: ${currentFps}`);
            }
        }
        
        // 摄像头加载事件
        cameraFeed.onload = function() {
            status.textContent = '✅ 摄像头已连接';
            status.className = 'status success';
            updateFps();
        };
        
        cameraFeed.onerror = function() {
            status.textContent = '❌ 摄像头连接失败';
            status.className = 'status error';
        };
        
        // 定期更新FPS
        setInterval(updateFps, 16); // 每16ms更新一次
    </script>
</body>
</html> 